<template>
  <header class="header">
    <section class="header-sum">
      <label class="header-label">累计销售额(元)</label>
      <main class="header-total">
        <h2 class="header-num">
          <span>￥</span><countTo :endVal="sumSale" :decimals="2" :duration="2000"></countTo>
        </h2>
        <div class="header-sub">
          <span>本月销售额：</span><countTo :endVal="monthSale" :decimals="2"  :duration="2000"></countTo>
        </div>
      </main>
    </section>
    <section class="header-sum">
      <label class="header-label">累计收益(元)</label>
      <main class="header-total">
        <h2 class="header-num">
          <span>￥</span><countTo :endVal="sumIncome" :decimals="2"  :duration="2000"></countTo>
        </h2>
        <div class="header-sub">
          <span>本月收益：</span><countTo :endVal="monthIncome" :decimals="2"  :duration="2000"></countTo>
        </div>
      </main>
    </section>
  </header>
</template>

<script>
import countTo from 'vue-count-to'
import { mapState, mapActions } from 'vuex'
export default {
  name: 'EarningHeader',
  components: {
    countTo
  },
  computed: {
    ...mapState({
      sumSale: state => state.main.sumSale,
      monthSale: state => state.main.monthSale,
      sumIncome: state => state.main.sumIncome,
      monthIncome: state => state.main.monthIncome
    })
  },
  created () {
    console.log('子组件的钩子')
    // 查询用户总额 累计销售额 当月销售额 累计收益 当月收益
    this.queryUserTotal()
  },
  methods: {
    ...mapActions({
      queryUserLevel: 'main/QueryUserLevel',
      queryUserTotal: 'main/QueryUserTotal'
    })
  }
}
</script>

<style  scoped lang="stylus">
  .header {
    display flex
    margin-left 30px
    margin-right 30px
    border-bottom  1px solid #ddd
    &-sum {
      flex 1
      padding-bottom 30px
      &:last-child {
        padding-left 30px
        position relative
        &:before {
          border-left 1px solid #ddd
          content ' '
          position absolute
          top 40px
          height 92px
          left 0
        }
      }
    }
    &-total {
      text-align center
    }
    &-label {
      color #999999
      font-size 18px
      line-height 38px
    }
    &-num {
      font-size 36px
      font-weight normal
      margin-top 12px
      margin-bottom 0
    }
    &-sub {
      font-size 18px
      line-height 24px
      color #999999
    }
  }

</style>
